<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>icons</title>
		<style>
		body {
			margin:0;
			padding:10px 20px;
			background:#fff;
			color:#222;
			}
		h1, div, footer {
			font-family:"Helvetica Neue", Arial, sans-serif;
			}
		h1 {
			margin:0 0 20px;
			font-size:32px;
			font-weight:normal;
			}
		h1 small {
			font-size: 0.8em;
			padding-left: 2em;
		}
		.icons {
			margin-bottom:40px;
			-webkit-column-count:5;
			   -moz-column-count:5;
			        column-count:5;
			-webkit-column-gap:20px;
			   -moz-column-gap:20px;
			        column-gap:20px;
			}
		.icons__item,
		.icons__item i {
			line-height:2em;
			cursor:pointer;
			overflow:hidden;
			}
		.icons__item:hover {
			color:#3c90be;
			}
		.icons__item i {
			display:inline-block;
			width:32px;
			text-align:center;
			}
		.icons__item:hover i {
			-webkit-transform:scale(1.5);
			        transform:scale(1.5);
			}
		footer {
			margin-top:40px;
			font-size:14px;
			color:#999;
			}

		/* Generated by grunt-webfont */


@font-face {
	font-family:"icons";
	src:url("./icons.eot?5f5e56aa80edb0d7be1a9633ca07fb10");
	src:url("./icons.eot?#iefix") format("embedded-opentype"),
		url("./icons.woff?5f5e56aa80edb0d7be1a9633ca07fb10") format("woff"),
		url("./icons.ttf?5f5e56aa80edb0d7be1a9633ca07fb10") format("truetype");
	font-weight:normal;
	font-style:normal;
}

.icon {
	
		font-family:"icons";
	
	display:inline-block;
	vertical-align:middle;
	line-height:1;
	font-weight:normal;
	font-style:normal;
	speak:none;
	text-decoration:inherit;
	text-transform:none;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}


/* Icons */


.academy:before {
	content:"\f101";
}


.add-circled:before {
	content:"\f102";
}


.add:before {
	content:"\f103";
}


.arrow-down:before {
	content:"\f104";
}


.arrow-left:before {
	content:"\f105";
}


.arrow-right:before {
	content:"\f106";
}


.arrow-up:before {
	content:"\f107";
}


.buy-tokens:before {
	content:"\f108";
}


.checkmark-check:before {
	content:"\f109";
}


.checkmark-circled:before {
	content:"\f10a";
}


.checkmark-uncheck:before {
	content:"\f10b";
}


.checkmark:before {
	content:"\f10c";
}


.close:before {
	content:"\f10d";
}


.conversation:before {
	content:"\f10e";
}


.copy-to-clipboard:before {
	content:"\f10f";
}


.devnet:before {
	content:"\f110";
}


.dropdown:before {
	content:"\f111";
}


.edit:before {
	content:"\f112";
}


.error:before {
	content:"\f113";
}


.external-link:before {
	content:"\f114";
}


.hide:before {
	content:"\f115";
}


.info:before {
	content:"\f116";
}


.internet:before {
	content:"\f117";
}


.lisk-chat:before {
	content:"\f118";
}


.locked:before {
	content:"\f119";
}


.login:before {
	content:"\f11a";
}


.logo-beta:before {
	content:"\f11b";
}


.logo-icon:before {
	content:"\f11c";
}


.logo-text:before {
	content:"\f11d";
}


.logout:before {
	content:"\f11e";
}


.mainnet:before {
	content:"\f11f";
}


.menu:before {
	content:"\f120";
}


.more:before {
	content:"\f121";
}


.network:before {
	content:"\f122";
}


.options:before {
	content:"\f123";
}


.radio-button-active:before {
	content:"\f124";
}


.radio-button-inactive:before {
	content:"\f125";
}


.remove-circled:before {
	content:"\f126";
}


.remove:before {
	content:"\f127";
}


.request-token:before {
	content:"\f128";
}


.search:before {
	content:"\f129";
}


.send-token:before {
	content:"\f12a";
}


.settings:before {
	content:"\f12b";
}


.show:before {
	content:"\f12c";
}


.smiley-angry:before {
	content:"\f12d";
}


.smiley-happy:before {
	content:"\f12e";
}


.smiley-laughing:before {
	content:"\f12f";
}


.smiley-neutral:before {
	content:"\f130";
}


.smiley-sad:before {
	content:"\f131";
}


.star-filled:before {
	content:"\f132";
}


.star-outline:before {
	content:"\f133";
}


.testnet:before {
	content:"\f134";
}


.undo:before {
	content:"\f135";
}


.unlocked:before {
	content:"\f136";
}


.usb-stick:before {
	content:"\f137";
}


.warning:before {
	content:"\f138";
}


.zoom-in:before {
	content:"\f139";
}


.zoom-out:before {
	content:"\f13a";
}

		</style>
	</head>
	<body>
		<h1>icons</h1>

		<div class="icons" id="icons">
			
				<div class="icons__item" data-name="academy"><i class="icon academy"></i> academy</div>
			
				<div class="icons__item" data-name="add-circled"><i class="icon add-circled"></i> add-circled</div>
			
				<div class="icons__item" data-name="add"><i class="icon add"></i> add</div>
			
				<div class="icons__item" data-name="arrow-down"><i class="icon arrow-down"></i> arrow-down</div>
			
				<div class="icons__item" data-name="arrow-left"><i class="icon arrow-left"></i> arrow-left</div>
			
				<div class="icons__item" data-name="arrow-right"><i class="icon arrow-right"></i> arrow-right</div>
			
				<div class="icons__item" data-name="arrow-up"><i class="icon arrow-up"></i> arrow-up</div>
			
				<div class="icons__item" data-name="buy-tokens"><i class="icon buy-tokens"></i> buy-tokens</div>
			
				<div class="icons__item" data-name="checkmark-check"><i class="icon checkmark-check"></i> checkmark-check</div>
			
				<div class="icons__item" data-name="checkmark-circled"><i class="icon checkmark-circled"></i> checkmark-circled</div>
			
				<div class="icons__item" data-name="checkmark-uncheck"><i class="icon checkmark-uncheck"></i> checkmark-uncheck</div>
			
				<div class="icons__item" data-name="checkmark"><i class="icon checkmark"></i> checkmark</div>
			
				<div class="icons__item" data-name="close"><i class="icon close"></i> close</div>
			
				<div class="icons__item" data-name="conversation"><i class="icon conversation"></i> conversation</div>
			
				<div class="icons__item" data-name="copy-to-clipboard"><i class="icon copy-to-clipboard"></i> copy-to-clipboard</div>
			
				<div class="icons__item" data-name="devnet"><i class="icon devnet"></i> devnet</div>
			
				<div class="icons__item" data-name="dropdown"><i class="icon dropdown"></i> dropdown</div>
			
				<div class="icons__item" data-name="edit"><i class="icon edit"></i> edit</div>
			
				<div class="icons__item" data-name="error"><i class="icon error"></i> error</div>
			
				<div class="icons__item" data-name="external-link"><i class="icon external-link"></i> external-link</div>
			
				<div class="icons__item" data-name="hide"><i class="icon hide"></i> hide</div>
			
				<div class="icons__item" data-name="info"><i class="icon info"></i> info</div>
			
				<div class="icons__item" data-name="internet"><i class="icon internet"></i> internet</div>
			
				<div class="icons__item" data-name="lisk-chat"><i class="icon lisk-chat"></i> lisk-chat</div>
			
				<div class="icons__item" data-name="locked"><i class="icon locked"></i> locked</div>
			
				<div class="icons__item" data-name="login"><i class="icon login"></i> login</div>
			
				<div class="icons__item" data-name="logo-beta"><i class="icon logo-beta"></i> logo-beta</div>
			
				<div class="icons__item" data-name="logo-icon"><i class="icon logo-icon"></i> logo-icon</div>
			
				<div class="icons__item" data-name="logo-text"><i class="icon logo-text"></i> logo-text</div>
			
				<div class="icons__item" data-name="logout"><i class="icon logout"></i> logout</div>
			
				<div class="icons__item" data-name="mainnet"><i class="icon mainnet"></i> mainnet</div>
			
				<div class="icons__item" data-name="menu"><i class="icon menu"></i> menu</div>
			
				<div class="icons__item" data-name="more"><i class="icon more"></i> more</div>
			
				<div class="icons__item" data-name="network"><i class="icon network"></i> network</div>
			
				<div class="icons__item" data-name="options"><i class="icon options"></i> options</div>
			
				<div class="icons__item" data-name="radio-button-active"><i class="icon radio-button-active"></i> radio-button-active</div>
			
				<div class="icons__item" data-name="radio-button-inactive"><i class="icon radio-button-inactive"></i> radio-button-inactive</div>
			
				<div class="icons__item" data-name="remove-circled"><i class="icon remove-circled"></i> remove-circled</div>
			
				<div class="icons__item" data-name="remove"><i class="icon remove"></i> remove</div>
			
				<div class="icons__item" data-name="request-token"><i class="icon request-token"></i> request-token</div>
			
				<div class="icons__item" data-name="search"><i class="icon search"></i> search</div>
			
				<div class="icons__item" data-name="send-token"><i class="icon send-token"></i> send-token</div>
			
				<div class="icons__item" data-name="settings"><i class="icon settings"></i> settings</div>
			
				<div class="icons__item" data-name="show"><i class="icon show"></i> show</div>
			
				<div class="icons__item" data-name="smiley-angry"><i class="icon smiley-angry"></i> smiley-angry</div>
			
				<div class="icons__item" data-name="smiley-happy"><i class="icon smiley-happy"></i> smiley-happy</div>
			
				<div class="icons__item" data-name="smiley-laughing"><i class="icon smiley-laughing"></i> smiley-laughing</div>
			
				<div class="icons__item" data-name="smiley-neutral"><i class="icon smiley-neutral"></i> smiley-neutral</div>
			
				<div class="icons__item" data-name="smiley-sad"><i class="icon smiley-sad"></i> smiley-sad</div>
			
				<div class="icons__item" data-name="star-filled"><i class="icon star-filled"></i> star-filled</div>
			
				<div class="icons__item" data-name="star-outline"><i class="icon star-outline"></i> star-outline</div>
			
				<div class="icons__item" data-name="testnet"><i class="icon testnet"></i> testnet</div>
			
				<div class="icons__item" data-name="undo"><i class="icon undo"></i> undo</div>
			
				<div class="icons__item" data-name="unlocked"><i class="icon unlocked"></i> unlocked</div>
			
				<div class="icons__item" data-name="usb-stick"><i class="icon usb-stick"></i> usb-stick</div>
			
				<div class="icons__item" data-name="warning"><i class="icon warning"></i> warning</div>
			
				<div class="icons__item" data-name="zoom-in"><i class="icon zoom-in"></i> zoom-in</div>
			
				<div class="icons__item" data-name="zoom-out"><i class="icon zoom-out"></i> zoom-out</div>
			
		</div>

		

		<h1>Usage</h1>
		<pre><code>&lt;i class=&quot;icon <span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
		

		<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>

		<script>
		(function() {
			document.getElementById('icons').onclick = function(e) {
				e = e || window.event;
				var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
				document.getElementById('name').innerHTML = name;
				
			}
		})();
		</script>
	</body>
</html>
